<template>
  <div>
    <div v-if="editable" class="crud-opts">
      <el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="doAddItem">增加</el-button>
      <el-button
        class="filter-item"
        size="mini"
        type="danger"
        icon="el-icon-delete"
        @click="doDeleteItem">删除</el-button>
    </div>
    <DataGridTable
      :data="voucherDetails"
      :show-summary="true"
      :show-page="false"
      summary-field=",summary,addTrxMoney,reduceTrxMoney"
      size="mini"
      stripe
      border
      max-height="300px"
      height="300px"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column prop="summary" label="摘要" width="200px">
        <template slot-scope="scope">
          <el-input v-model="scope.row.summary" :disabled="!editable" size="mini" style="width: 100%"/>
        </template>
      </el-table-column>
      <el-table-column label="会计科目">
        <template slot-scope="scope">
          <FinItemTreeSelect v-if="editable" ref="finItemTreeSelect" :editable="editable" v-model="scope.row.finCode" :data-trees="finCodeList" style="width: 100%" placeholder="选择科目" />
          <template v-else>
            <span>{{ scope.row.finCodeName }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="借方金额(+)" width="100" prop="addTrxMoney">
        <template slot-scope="scope">
          <el-input-number v-model.number="scope.row.addTrxMoney" :disabled="!editable" :controls="false" :precision="2" size="mini" style="width: 100%"/>
        </template>
      </el-table-column>
      <el-table-column label="贷方金额(-)" width="100" prop="reduceTrxMoney">
        <template slot-scope="scope">
          <el-input-number v-model.number="scope.row.reduceTrxMoney" :disabled="!editable" :controls="false" :precision="2" size="mini" style="width: 100%"/>
        </template>
      </el-table-column>
    </DataGridTable>
  </div>
</template>

<script>
import finItem from '@/api/fin/FinItem'
import FinItemTreeSelect from '@/views/fin/baseitem/module/FinItemTreeSelect'

export default {
  components: { FinItemTreeSelect },
  props: {
    voucherDetails: {
      type: Array,
      required: true
    },
    busMainData: {
      type: Object,
      required: true,
      default: () => {}
    },
    editable: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      finCodeList: [],
      loading: false,
      selectedDetailRows: [],
      style: 'width: 150px'
    }
  },
  created() {
    finItem.getFinItemData({ 'activeFlag': 'Y' }).then(res => {
      this.finCodeList = res.data
    })
  },
  methods: {
    getMaxDetailNum() {
      let detailNum = 0
      this.voucherDetails.forEach(tmprow => {
        if (tmprow.num > detailNum) {
          detailNum = tmprow.num
        }
      })
      return detailNum
    },
    handleSelectionChange(val) {
      this.selectedDetailRows = val
    },
    doAddItem() {
      const tmpDetails = JSON.parse(JSON.stringify(this.voucherDetails))
      let detailNum = this.getMaxDetailNum()
      detailNum++
      const addRow = {}
      addRow.id = null
      addRow.num = detailNum
      tmpDetails.push(addRow)
      this.$emit('setDetails', tmpDetails)
    },
    doDeleteItem() {
      let tmpDetails = JSON.parse(JSON.stringify(this.voucherDetails))
      this.selectedDetailRows.forEach(tmprow => {
        tmpDetails = tmpDetails.filter(vo => vo.num !== tmprow.num)
      })
      this.$emit('setDetails', tmpDetails)
    }
  }
}
</script>
